﻿@page "/components/daterangepicker"

<DocsPage>
    <DocsPageHeader Title="Date Range Picker" Component="@nameof(MudDateRangePicker)" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Usage" />
            <SectionContent Code="@nameof(DateRangePickerBasicUsageExample)" ShowCode="false">
                <DateRangePickerBasicUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Editable" />
            <SectionContent Code="@nameof(DateRangePickerEditableExample)" ShowCode="false">
                <DateRangePickerEditableExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Format" />
            <SectionContent Code="@nameof(DateRangePickerFormatExample)" ShowCode="false">
                <DateRangePickerFormatExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Min/Max Date">
                <Description>
                    Defines the earliest and latest calendar dates available from user selection
                </Description>                
            </SectionHeader>
            <SectionContent Code="@nameof(DateRangePickerMinMaxDateExample)" ShowCode="false">
                <DateRangePickerMinMaxDateExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Min/Max Days">
                <Description>
                    Defines the smallest and largest number of days that a user can select.<br/><br/>
                    For performance reasons, the component checks up to 50 years ahead, from the user-selected start date, to find valid dates that meet the <CodeInline>MaxDays</CodeInline> requirement. 
                    To extend this limit, set the <CodeInline>MaxDate</CodeInline> property to a specific date.
                </Description>    
            </SectionHeader>
            <SectionContent Code="@nameof(DateRangePickerMinMaxDaysExample)" ShowCode="false">
                <DateRangePickerMinMaxDaysExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Action Buttons" />
            <SectionContent Code="@nameof(DateRangePickerActionButtonsExample)" ShowCode="false">
                <DateRangePickerActionButtonsExample />
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
